<template>
  <chart :id="id" :option="option"></chart>
</template>

<script>
import _ from 'lodash'
import chart from '../chart/chart'
export default {
  name: 'cPie',
  props: {
    id: {
      type: String,
      required: true
    },
    chartData: {
      type: Array,
      default: () => [
        {
          name: '直接访问',
          value: 335
        },
        {
          name: '邮件营销',
          value: 319
        },
        {
          name: '联盟广告',
          value: 267
        },
        {
          name: '视频广告',
          value: 545
        },
        {
          name: '搜索引擎',
          value: 423
        }
      ]
    },
    chartOption: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    'chart': chart
  },
  computed: {
    // 图表配置项
    option () {
      const that = this
      // 返回默认配置项与传入配置合并后的option，生成图表
      return _.merge({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {},
        series: [{
          type: 'pie',
          radius: '60%',
          label: {
            formatter: ['{name|{b}}', '\n{percent|{c} ({d}%)}'].join(''),
            rich: {
              name: {
                fontSize: 14,
                lineHeight: 28
              },
              percent: {
                color: '#fff'
              }
            }
          },
          data: that.chartData.map(function (data) {
            let name = ''
            let value = ''
            for (let key in data) {
              name = data[key]
              break
            }
            for (let key in data) {
              value = data[key]
            }
            return {
              name: name,
              value: value
            }
          })
        }]
      }, that.chartOption)
    }
  }
}
</script>

<style scoped>

</style>
